<template>
  <div class="m-detail-list">
    <div class="container">
      <div class="list-header">
        <rowItem
          :data="{
            music_name: '歌曲',
            singer_name: '歌手',
            album_name: '专辑',
          }"
        ></rowItem>
      </div>
      <div class="list-body">
        <template v-for="(item, index) in Listdata.songlist" :key="index">
          <rowItem
            :data="item"
            :index="index + 1"
            :checked="checkAllBool"
            @checkClick="checkClick"
          ></rowItem>
        </template>
      </div>
      <div class="list-footer">
        <div class="row">
          <div class="song-check">
            <input
              type="checkbox"
              :checked="checkAllBool"
              @click="checkAllClick"
            />
          </div>
          <div class="song-index">全选</div>
          <div class="song-actions">
            <DetailButton @click="toPlay">
              <i class="iconfont icon-bofangsanjiaoxing"></i>
              播放选中歌曲
            </DetailButton>
          </div>
        </div>
      </div>
      <MPage
        v-if="Listdata.songnum >= 20"
        :curPageIdx="page"
        :pageSum="Math.ceil(Listdata.songnum / (sum || 20))"
        @dirClick="pageClick"
      ></MPage>
    </div>
  </div>
</template>
<script>
import utils from "@/libs/utils";
import { reactive, toRefs, watch } from "vue";
import rowItem from "./Plugin/rowItem";
import DetailButton from "./Plugin/button";
export default {
  name: "DetailList",
  props: {
    data: Object,
  },
  components: {
    rowItem,
    DetailButton,
  },
  setup(props) {
    const state = reactive({
      Listdata: props.data,
      checkAllBool: false,
      page: 1,
      sum: 20,
      checkAll: [],
    });
    // 播放跳转
    const toPlay = () => {
      if (state.checkAll[0]) {
        let isTo = utils.getLocalStorage("isToPlayer");
        if (isTo) {
          utils.setLocalStorage(
            "y_playlist",
            JSON.stringify({
              songlist: state.checkAll,
              length: state.checkAll.length,
            })
          );
        } else {
          utils.setLocalStorage(
            "y_playlist",
            JSON.stringify({
              songlist: state.checkAll,
              length: state.checkAll.length,
            })
          );
          utils.setLocalStorage("isToPlayer", "");
          window.open("/player");
        }
      }
    };

    // 页码点击事件
    const pageClick = (index) => {
      state.page = index;
      state.checkAll = [];
      state.checkAllBool = false;
      getSongListDetailData(state.page, state.sum);
    };

    // 全选按钮点击事件
    const checkAllClick = () => {
      state.checkAllBool = !state.checkAllBool;
      if (state.checkAllBool) {
        let arr = [];
        state.Listdata.songlist.map((item, index) => {
          if (item.is_lock != "-1") arr.push(item);
        });
        state.checkAll = [].concat(arr);
      } else {
        state.checkAll = [];
      }
    };

    // 单选按钮点击
    const checkClick = (item) => {
      if (item.ischeck) {
        state.checkAll.push(item.data);
      } else {
        let i = state.checkAll.indexOf(item.data);
        state.checkAll.splice(i, 1);
      }
    };

    watch(
      () => props.data,
      () => {
        getSongListDetailData(state.page, state.sum);
      }
    );

    // 获取详情页数据，page从1开始
    const getSongListDetailData = (page, sum = 20) => {
      state.Listdata = {
        // songmids:props.data.songmids.slice((page-1) * sum,page * sum),
        songlist: props.data.songlist.slice((page - 1) * sum, page * sum),
        songnum: props.data.songnum,
      };
    };

    return {
      ...toRefs(state),
      checkClick,
      checkAllClick,
      pageClick,
      toPlay,
    };
  },
};
</script>

<style lang='scss'>
.m-detail-list {
  .row {
    &:hover {
      background-color: rgba(204, 204, 204, 0.3);
    }
    a {
      color: #333;
      &:hover {
        color: $ThemeColor;
      }
    }
    input {
      -webkit-appearance: auto;
    }
    position: relative;
    padding: 25px 0 25px 125px;
    overflow: hidden;
    color: #999;
    font-size: 12px;
    div {
      float: left;
    }
    .song-check {
      width: 17px;
      text-align: center;
      cursor: pointer;
      position: absolute;
      top: 25px;
      left: 25px;
    }
    .song-index {
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      position: absolute;
      top: 25px;
      left: 75px;
    }
    .song-name {
      width: 40%;
    }
    .song-singers {
      width: 20%;
      margin-right: 2%;
    }
    .song-belongs {
      width: 20%;
      margin-right: 3%;
    }
    .song-actions {
    }
  }
  .list-footer {
    .song-check,
    .song-index {
      top: 35px;
    }
  }
}
</style>
